<template>
  <view class="mine-container">
    <!-- 顶部标题 -->
    <view class="page-header">
      <text class="page-title">个人中心</text>
      <view class="settings-btn" @click="goToSettings">
        <uni-icons type="gear" size="24" color="#333"></uni-icons>
      </view>
    </view>
    
    <!-- 用户信息 -->
    <view class="user-info">
      <view class="avatar-wrapper">
        <image :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill" class="avatar"></image>
      </view>
      <view class="user-detail">
        <view class="user-name">{{ userInfo.name }}</view>
        <view class="user-phone">{{ formatPhone(userInfo.phone) }}</view>
      </view>
      <view class="edit-btn" @click="editUserInfo">
        <text>编辑资料</text>
      </view>
    </view>
    
    <!-- 功能快捷入口 -->
    <view class="quick-actions">
      <view class="action-item" @click="goToWallet">
        <view class="action-icon">
          <uni-icons type="wallet" size="24" color="#ff7a45"></uni-icons>
          <view class="badge" v-if="walletBadge > 0">{{ walletBadge }}</view>
        </view>
        <text class="action-text">我的钱包</text>
      </view>
      <view class="action-item" @click="goToCoupons">
        <view class="action-icon">
          <uni-icons type="gift" size="24" color="#ff7a45"></uni-icons>
          <view class="badge" v-if="couponBadge > 0">{{ couponBadge }}</view>
        </view>
        <text class="action-text">优惠券</text>
      </view>
      <view class="action-item" @click="goToFavorites">
        <view class="action-icon">
          <uni-icons type="heart" size="24" color="#ff7a45"></uni-icons>
        </view>
        <text class="action-text">我的收藏</text>
      </view>
      <view class="action-item" @click="goToAddresses">
        <view class="action-icon">
          <uni-icons type="location" size="24" color="#ff7a45"></uni-icons>
        </view>
        <text class="action-text">地址管理</text>
      </view>
    </view>
    
    <!-- 我的服务 -->
    <view class="section-title">
      <text>我的服务</text>
    </view>
    
    <view class="menu-list">
      <view class="menu-item" @click="goToOrders">
        <view class="menu-icon">
          <uni-icons type="list" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">我的订单</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
      
      <view class="menu-item" @click="goToDemands">
        <view class="menu-icon">
          <uni-icons type="help" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">服务需求</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
      
      <view class="menu-item" @click="goToReviews">
        <view class="menu-icon">
          <uni-icons type="chat" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">我的评价</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>
    
    <!-- 客户服务 -->
    <view class="section-title">
      <text>客户服务</text>
    </view>
    
    <view class="menu-list">
      <view class="menu-item" @click="goToHelpCenter">
        <view class="menu-icon">
          <uni-icons type="info" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">帮助中心</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
      
      <view class="menu-item" @click="goToFeedback">
        <view class="menu-icon">
          <uni-icons type="mail" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">意见反馈</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
      
      <view class="menu-item" @click="contactCustomerService">
        <view class="menu-icon">
          <uni-icons type="headphones" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">联系客服</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>
    
    <!-- 关于我们 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToAboutUs">
        <view class="menu-icon">
          <uni-icons type="info-filled" size="20" color="#ff7a45"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">关于我们</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" @click="logout">
      <uni-icons type="logout" size="20" color="#ff7a45"></uni-icons>
      <text>退出登录</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 用户信息
const userInfo = ref({
  name: '张先生',
  phone: '13812345678',
  avatar: '/static/images/avatar.jpg'
});

// 徽标数量
const walletBadge = ref(0);
const couponBadge = ref(2);

// 格式化手机号
const formatPhone = (phone) => {
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 编辑用户资料
const editUserInfo = () => {
  uni.navigateTo({
    url: '/pages/mine/edit-profile'
  });
};

// 前往设置页面
const goToSettings = () => {
  uni.navigateTo({
    url: '/pages/mine/settings'
  });
};

// 前往钱包页面
const goToWallet = () => {
  uni.navigateTo({
    url: '/pages/mine/wallet'
  });
};

// 前往优惠券页面
const goToCoupons = () => {
  uni.navigateTo({
    url: '/pages/mine/coupons'
  });
};

// 前往收藏页面
const goToFavorites = () => {
  uni.navigateTo({
    url: '/pages/mine/favorites'
  });
};

// 前往地址管理页面
const goToAddresses = () => {
  uni.navigateTo({
    url: '/pages/mine/addresses'
  });
};

// 前往订单页面
const goToOrders = () => {
  uni.navigateTo({
    url: '/pages/order/list'
  });
};

// 前往需求页面
const goToDemands = () => {
  uni.navigateTo({
    url: '/pages/demand/list'
  });
};

// 前往评价页面
const goToReviews = () => {
  uni.navigateTo({
    url: '/pages/mine/reviews'
  });
};

// 前往帮助中心
const goToHelpCenter = () => {
  uni.navigateTo({
    url: '/pages/mine/help-center'
  });
};

// 前往意见反馈
const goToFeedback = () => {
  uni.navigateTo({
    url: '/pages/mine/feedback'
  });
};

// 联系客服
const contactCustomerService = () => {
  uni.makePhoneCall({
    phoneNumber: '400-123-4567',
    success: function() {
      console.log('拨打电话成功');
    },
    fail: function() {
      console.log('拨打电话失败');
    }
  });
};

// 前往关于我们
const goToAboutUs = () => {
  uni.navigateTo({
    url: '/pages/mine/about'
  });
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: function(res) {
      if (res.confirm) {
        // 清除登录状态
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        
        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/index'
        });
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

// 顶部标题
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  
  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
  
  .settings-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 用户信息
.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .avatar-wrapper {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    overflow: hidden;
    margin-right: 30rpx;
    
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
  
  .user-detail {
    flex: 1;
    
    .user-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .user-phone {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .edit-btn {
    padding: 10rpx 30rpx;
    border: 1px solid #ddd;
    border-radius: 30rpx;
    
    text {
      font-size: 26rpx;
      color: #666;
    }
  }
}

// 功能快捷入口
.quick-actions {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .action-icon {
      position: relative;
      width: 80rpx;
      height: 80rpx;
      background-color: #fff8f6;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10rpx;
      
      .badge {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        min-width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        background-color: #ff4d4f;
        color: #fff;
        border-radius: 18rpx;
        font-size: 24rpx;
        padding: 0 6rpx;
      }
    }
    
    .action-text {
      font-size: 26rpx;
      color: #666;
    }
  }
}

// 分区标题
.section-title {
  padding: 30rpx 30rpx 20rpx;
  
  text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

// 菜单列表
.menu-list {
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-icon {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
    }
    
    .menu-content {
      flex: 1;
      
      .menu-text {
        font-size: 30rpx;
        color: #333;
      }
    }
  }
}

// 退出登录按钮
.logout-btn {
  margin: 40rpx 30rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 45rpx;
  
  text {
    font-size: 32rpx;
    color: #ff7a45;
    margin-left: 10rpx;
  }
}

// 适配底部安全区
@supports (bottom: constant(safe-area-inset-bottom)) {
  .mine-container {
    padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  }
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .mine-container {
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  }
}
</style>